<template>
	<view class="popup-confirm" @click.prevent.self="onCloseTap">
		<view class="p-block">
			<view class="p-content">
				{{msg}}
			</view>
			<view class="p-footer">
				<view class="cancel btn" @click="onCloseTap">取消</view>
				<view class="confirm btn" @click="onPostTap">确定</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'popupConfirm',
		props: {
			msg: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
			}
		},
		methods: {
			onCloseTap() {
				this.$emit('onCloseTap');
			},
			onPostTap() {
				this.$emit('onPostTap');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-confirm{
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba($color: #000000, $alpha: 0.6);
		// 二次确认模块
		.p-block{
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 580rpx;
			height: 324rpx;
			background-color: #FFFFFF;
			border-radius: 22rpx;
			.p-content{
				display: table-cell;
				height: 232rpx;
				width: 580rpx;
				line-height: 56rpx;
				font-size: 34rpx;
				color: #1A1A1A;
				text-align: center;
				vertical-align: middle;
				padding: 0 30rpx;
				border-bottom: 1rpx solid #EAEFF1;
			}
			.p-footer{
				height: 90rpx;
				line-height: 90rpx;
				font-size: 30rpx;
				text-align: center;
				.btn{
					float: left;
					width: 50%;
				}
				.cancel{
					position: relative;
					color: #7F7F7F;
					// border-right: 1rpx solid #EAEFF1;
					&::after{
						content: '';
						position: absolute;
						top: 0;
						right: 0;
						width: 1rpx;
						height: 90rpx;
						background-color: #EAEFF1;
					}
				}
				.confirm{
					color: $color-common;
				}
			}
		}
	}
</style>
